


<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>form data 转 key/value在线工具-postjson</title>
    <meta name="robots" content="all" />
    <meta name="keywords" content="formdata,form,data,key,value,change,转化,formdata转kv,formdata转json" />
    <meta name="description" content="formdata,form,data,key,value,change,转化,formdata转kv" />
    <link rel="shortcut icon" href="/static/coolaf/img/favicon.ico">
    
    
    <script src="/static/coolaf/js/ie-emulation-modes-warning.js"></script>

    
    
    
    <link rel="stylesheet" href="/static/coolaf/bootstrap/css/bootstrap.min.css">
    <script src="/static/coolaf/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/coolaf/css/offcanvas.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<script>
        var showToast = function (msg,option) {
        outTime = 3000;
        if (option&&option.outTime) {
            outTime = option.outTime;
        }
        if (!$(".showtoastresult").html()) {
            html = "<div class='showtoastresult' style='min-width: 50px;width: auto;padding: 10px 20px;font-size: 14px;font-weight: bold;background: rgba(7, 17, 27, 0.66);border-radius: 6px;color: rgb(255, 255, 255);top: 50%;z-index: 1000001;transform: translate3d(-50%, -50%, 0px);position: fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);'></div>";
            $(document.body).append(html);
        }
        $(".showtoastresult").html(msg);    
        $(".showtoastresult").fadeIn("slow").fadeOut(3000);
        return false;
    }
</script>
<style>
    .navbar-brand,.navbar-nav>li>a{
        color:#fdfdfd!important;
    }
    .navbar-nav>li>a:hover{
        color:#ff8839!important;
    }
</style>
<body >
    
	<script>
	$("#black1").click(function(){
		var s = $(this).html();
		if (s=="夜间模式") {
			$('body').css("background-color","black");
			$('body').css("opacity","0.7")
			$('body').css("-moz-opacity","0.7")
			$('body').css("filter","alpha(opacity=50)")
			$(this).html('白天模式');
		}else{
			$('body').css("background-color","");
			$('body').css("opacity","")
			$('body').css("-moz-opacity","")
			$('body').css("filter","")
			$(this).html('夜间模式');
		}
	});
	</script>
    
    <div class="container">

        <div class="row row-offcanvas row-offcanvas-right main-contain">
            
            <div class="col-xs-12 col-sm-9">
                
                
              

<div style="width:90%;">
    <div style='margin-bottom: 10px'>


        <textarea cols="60" rows='20' id='textarea' style='width:100%'>
        ------WebKitFormBoundaryWkc7XCs1iwhGrg5Z
Content-Disposition: form-data; name="hello"

newhello
------WebKitFormBoundaryWkc7XCs1iwhGrg5Z
Content-Disposition: form-data; name="test"

32323
------WebKitFormBoundaryWkc7XCs1iwhGrg5Z
Content-Disposition: form-data; name="cover"

world
------WebKitFormBoundaryWkc7XCs1iwhGrg5Z--
    </textarea>
        <div style='width:100%;margin:0px auto;'>
            <span class="glyphicon glyphicon-arrow-down" style="width:30%;margin:0px auto;font-size:40px"></span>
            <button id='btn' class='btn btn-primary' style='width:30%; '>formdatatokv</button>
            <span class="glyphicon glyphicon-arrow-down" style="float:right;margin-right:50px;font-size:40px"></span>
        </div>
    </div>
    <div style='width:100%'>
        <div style='float:left;'>
            <textarea rows="20" cols="30" id='paramarea'></textarea>
        </div>
        <div style='min-height:408px;width:30px;float:left;margin-left:5px'>
            <div>
                <button id='areatokv' style='text-align:center;margin-top:20px '>areatokv</button>
                <span class="glyphicon glyphicon-arrow-right" style='font-size:40px;width:30px'></span>
            </div>
            <div>
                <button id='clearform' class='btn btn-primary' style='margin-top:100px'>clear</button>
            </div>
            <div>
                <button id='kvtoarea' style='text-align:center;margin-top:100px '>kvtoarea</button>
                <span class="glyphicon glyphicon-arrow-left" style='font-size:40px;width:30px'></span>
            </div>
        </div>
        <div style='border:1px solid #ccc;margin-left:50px;min-height:408px;line-height:10px;float:left'>
            <div class="form-inline input-line  " param='other' style='margin-top:10px'>
                <span style='margin-left:13px'></span>
                <input type="text" class="form-control keyupinput" placeholder="Key">
                <input type="text" class="inpuwidth form-control keyupinput" placeholder="Value"> &nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div style="clear：both;overflow: hidden">

    </div>
    <div style='clear:both;margin-top:10px'>
        1.content-type:form-data的时候，是文件上传时候用到的，也可以传递普通的参数，但格式和普通的x-www-form-urlencode不同，格式如上示例 <br> 2.本工具是把form-data的参数转成字符串模式和key/value模式<br> 3.同时提供在字符串和key/value直接随意转换
    </div>
</div>


<script>
    $("#btn").click(function() {
        var f = $("#textarea").val();
        var arr = f.split("Content-Disposition: form-data;");
        var paramarea = "";
        $.each(arr, function(i) {

            var sss = arr[i].match('.*name="(.*)"\n\n(.*)\n');
            var status = false;
            for (var name in sss) {

                if (name == "1") {
                    status = true;
                    paramarea += sss[name] + "=";
                    console.log(name, sss[name]);
                }
                if (name == "2") {
                    paramarea += sss[name] + "&";
                    console.log(name, sss[name]);
                }

            }
            if (!status) {
                var sss = arr[i].match('.*name="(.*)";.*filename="(.*)"\n');
                for (var name in sss) {
                    if (name == "1") {
                        paramarea += sss[name] + "=";
                        console.log(name, sss[name]);
                    }
                    if (name == "2") {
                        paramarea += sss[name] + "&";
                        console.log(name, sss[name]);
                    }
                }
            }
        });
        console.log(paramarea);
        paramarea = paramarea.substr(0, paramarea.length - 1);
        $("#paramarea").val(paramarea);
        $("div[removeattr='removeattr']").remove();
        if (paramarea != "") {
            areatokv(paramarea, "other");
        }
    });
    $(document).on("click", '.keyupinput', function() {
        addinput($(this));
    });

    $("#areatokv").click(function() {
        var paramarea = $("#paramarea").val();
        $("div[removeattr='removeattr']").remove();
        if (paramarea != "") {
            areatokv(paramarea, "other");
        }
    });
    $("#kvtoarea").click(function() {
        var param = getkvchuan("other");
        if (param != "") {
            $("#paramarea").val(param);
        }
    });
    $("#clearform").click(function() {
        $("#paramarea").val("");
        $("div[removeattr='removeattr']").remove();
    });

    function areatokv(params, type, isform) {
        isform = typeof(isform) == 'undefined' ? 'undefined' : isform;
        var paramarr = new Array();
        if (type == "ck") {
            paramarr = params.split(";");
        } else if (type == "header") {
            paramarr = params.split("\n");
        } else {
            paramarr = params.split("&");
        }
        for (var i = 0; i < paramarr.length; i++) {
            var kv = paramarr[i];
            var kvarr = new Array();
            if (type == "header") {
                kvarr = kv.split(":");
            } else {
                kvarr = kv.split("=");
            }
            if (kvarr.length > 1) {
                var tt = $("div[param='" + type + "']").children();
                addinput(tt, kvarr[0], decodeURIComponent(kvarr[1]));
            }

        }
    }
    $(document).on("click", '.delinput', function() {
        $(this).parent().remove();
    });
    var addinput = function(e, key, value, isfrom) {
        key = typeof(key) == 'undefined' ? '' : key;
        value = typeof(value) == 'undefined' ? '' : value;
        
        var p = e.parent("div");
        
        var param = p.attr("param");
        if (param == "" || typeof(param) == 'undefined') {
            alert("缺少属性");
            return false;
        }
        
        
        var html = '<div class="form-inline input-line" removeattr="removeattr" style="margin-top:10px">';
        html += '<input type="checkbox" name="' + param + '" value="option1" aria-label="..." checked>';
        html += '<input type="text" class="form-control " placeholder="Key" value="' + key + '">';
        if (typeof(isfrom) == 'undefined') {
            html += ' <input type="text" class="form-control addchuan inpuwidth" placeholder="Value" style="" value="' + value + '">&nbsp;&nbsp;&nbsp;';
        } else {
            html += ' <input type="text" class="form-control addchuan inpuwidth" placeholder="Value" style="" value="' + value + '">&nbsp;&nbsp;&nbsp;';
            html += '<select class="formselect form-control"><option value="text">text</option><option value="file">file</option></select>';
        }
        html += '<span class="glyphicon glyphicon-remove delinput" ></span>';
        html += '</div>';
        p.before(html);
        e.parent().prev().children("input[type='text']:first").focus();
        
        
    }

    var getkvchuan = function(param) {
        var paramkv = '';
        $("input[name='" + param + "']:checked").each(function() {
            var next = $(this).next('input');
            var value = "";

            if (param == "ck") {
                paramkv += next.val() + "=" + next.next('input').val() + ";";
            } else if (param == "header") {
                paramkv += next.val() + ":" + next.next('input').val() + "\n";
            } else if (param == "formdata") {
                var last = $(this).last();
                var sel = next.next().next('select').val();
                if (sel == "file") {
                    if (next.next('select').val() != "") {
                        value = encodeURIComponent(next.next('select').val());
                    }
                    paramkv += "@" + next.val() + "=" + value + "&"
                } else {
                    if (next.next('input').val() != "") {
                        value = encodeURIComponent(next.next('input').val());
                    }
                    paramkv += next.val() + "=" + value + "&"
                }
            } else {
                if (next.next('input').val() != "") {
                    value = encodeURIComponent(next.next('input').val());
                }
                paramkv += next.val() + "=" + value + "&"
            }
        });
        paramkv = paramkv.substr(0, paramkv.length - 1);
        return paramkv;
    }
</script>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2db240112a8dbb4d6a2869381e5fbfed";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



 </div>
	
    </div>
</div>


  <script src="/static/coolaf/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/coolaf/js/offcanvas.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?18f18be6e58f13d87192835c8c15fdca";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
try{
　　top.location.hostname;
　　if (top.location.hostname != window.location.hostname) {
　　　　top.location.href =window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}
</script>
<script>
$.ajax({
	  url:"/side",
	  type:"GET",
	  dataType:"jsonp",
	  success:function(data){
		
		$(".sideclass").each(function(){
			
		});
	  }
     });
</script>
<a href='/m'>m</a>

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
$(document).ready(function () {
		$("#newpayup").click(function () {
			$("#payup").show();
		});
		$("#payup").click(function () {
			$(this).hide();
		});
});
</script>
<style>
		.payup {
			display: none;
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			z-index: 6666
		}

		.postpay {
			position: relative;
			float: right;
		}

		.postpay button {
			color: yellow;
			width: 68px;
			height: 50px;
			word-wrap: break-word;
			background-color: hsl(340, 100%, 75%);
			box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px;
			border: none;
			padding-right: 1.2em;
			padding-left: 0.8em;
			border-radius: 3em 1em / 5em 1em;
		}

		.payupimg {
			width: 680px;
			height: 390px;
			margin: 0 auto;
			position: relative;
			top: 256px;
			z-index: 9999;
			background: white;
		}

		.payup img {
			float: left;
			width: 280px;
			height: 280px;
			margin:30px 30px 30px 30px;
		}

		.imgtext {
			width: 330px;
			display: inline-block;
			text-align: center;
			font-size: 20px;
			font-weight: blod;
		}
	</style>
	<div class='payup' id='payup'>
		<span></span>
		<div class='payupimg'>
			<img src="/static/coolaf/img/zfb.png" >
			<img src="/static/coolaf/img/wx.png" >
			<div>
				<span class='imgtext'>支付宝</span>
				<span class='imgtext'>微信</span>
			</div>
		</div>
	</div>
</body>
</html>
